<template>
  <div>
    <SearchForm
      @search="onSearch"
      @reset="onReset"
      :search-list="searchList" 
      :search-params="searchParams">
    </SearchForm>

    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-handle">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="onAdd">新增</el-button>
        </div>
        <div class="table-box">
          <el-table
            size="large"
            stripe
            border
            v-loading="loading"
            max-height="500px"
            :data="tableData"
            row-key="id"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
            @selection-change="onSelect"
          >
            <el-table-column align="center" label="ID" width="80" prop="id" />
            <el-table-column align="center" label="楼层编号" prop="floor_number" />
            <el-table-column align="center" label="所属图书馆" prop="library.name" />
            <el-table-column align="center" label="描述" prop="description" />
            <el-table-column align="center" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                  {{ scope.row.status === 1 ? '开放' : '关闭' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="220" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="onEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" style="color: #F82222" @click="onDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
    <Add ref="addFormRef" @get-page="initData" />
  </div>
</template>

<script>
import crud from "@/mixins/crud";
import { http } from '@/api'
import SearchForm from "@/components/SearchForm";
import Add from './add.vue'

export default {
  name: 'LibraryFloors',
  components: { 
    SearchForm,
    Add
  },
  mixins: [crud],
  data() {
    return {
      request: http.libraryFloors,
      searchList: [
        {
          label: '图书馆',
          prop: 'library_id',
          name: 'select',
          clearable: true,
          options: []
        },
        {
          label: '楼层编号',
          prop: 'floor_number',
          name: 'input',
          clearable: true
        },
        {
          label: '状态',
          prop: 'status',
          name: 'select',
          clearable: true,
          options: [
            { label: '开放', value: 1 },
            { label: '关闭', value: 0 }
          ]
        }
      ],
      searchParams: {
        library_id: '',
        floor_number: '',
        status: ''
      },
      defaultParams: {}
    }
  },
  created() {
    this.getLibraryOptions();
    
    // 如果是从图书馆页面跳转过来，设置默认图书馆
    if (this.$route.query.libraryId) {
      this.searchParams.library_id = parseInt(this.$route.query.libraryId);
    }
  },
  methods: {
    getLibraryOptions() {
      http.libraries.list().then(response => {
        const librarySelectIndex = this.searchList.findIndex(item => item.prop === 'library_id');
        if (librarySelectIndex !== -1) {
          this.searchList[librarySelectIndex].options = response.data.map(item => {
            return { label: item.name, value: item.id };
          });
        }
      });
    },
    onAdd() {
      this.$refs.addFormRef.open();
    },
    onEdit(row) {
      this.$refs.addFormRef.open(row);
    },
    onDelete(row) {
      this.$confirm('确认删除该楼层吗？删除后将无法恢复', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete(row.id).then(() => {
          this.$message.success('删除成功')
          this.initData()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleViewAreas(row) {
      this.$router.push({ path: '/library/areas', query: { floorId: row.id }})
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  margin-top: 20px;
}
.table-handle {
  margin-bottom: 20px;
}
.table-box {
  margin-bottom: 20px;
}
.page-box {
  text-align: right;
  margin-top: 15px;
}
</style>
